<template>
    <div class="Personality">
        <div class="banner">
            <img src="https://img.xiaopiu.com/userImages/img212317196584ef0.png" alt="">
        </div>
        <div class="hot">
            <h5><i class="el-icon-s-promotion"></i> 今日热门</h5>
            <ul>
                <li>互联网是怎么跟广告业抢饭吃的</li>
                <li>中国哪个姓氏最厉害</li>
            </ul>
        </div>
        <div class="article">
            <ul>
                <li v-for="(item, i) in list.slice(0, 3)" :key="i" class="articleaaa">
                    <div class="left">
                        <router-link :to="`/article/${item.id}`">
                            <h5>{{item.title}}</h5>
                            <p v-html="item.title"></p>
                        </router-link>
                    </div>
                    <div class="right">
                        <img src="https://img.xiaopiu.com/userImages/img22215f0a90fcf8.png" alt="">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return{
                list:[],
            }
        },
        mounted() {
            this.$store.dispatch('getArticlest');
            this.list = this.$store.state.home.txt
            // console.log(this.list)
        }
    }   
</script>

<style scoped>
    .Personality{
        padding-bottom: 0.48rem;
    }
    .banner{
        width:100%;
        height: 3.45rem;
    }
    .banner img{
        width:100%;
    }
    .hot{
        width: 100%;
        height: 1.6rem;
        background: rgba(255, 255, 255, 1);
    }
    .hot h5{
        padding-top: 5px;
    }
    .hot i{
        margin-left:10px;
    }
    .hot ul{
        margin:8px;
        font-size: 12px;
        font-weight: 600;
    }
    .hot li{
        margin-top: 2px;
        margin-left: 9px;
        list-style: disc;
        color:rgb(102, 102, 93);
    }
    .left{
        width: 4rem;
    }
    .left h5{
        font-size: 13px;
        margin:10px;
    }
    .left p{
        font-size: 10px;
        width: 200px;
        margin-left: 10px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .right{
        width: 0.8rem;
    }
    .right img{
        width: 100%;
        /* vertical-align: middle; */
        display: block;
        border:0;
    }
    .articleaaa{
        display: flex;
        justify-content: space-around;
        margin-top: 0.03rem;
        background: rgba(255, 255, 255, 1);
    }
    .article{
        margin-top:5px;
    }
</style>